<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>刮刮卡 v3 - 自动显示</title>
<style>
body{
    margin:0;
    display:flex;
    justify-content:center;
    align-items:center;
    height:100vh;
    background: linear-gradient(to bottom, #00bfff, #87cefa);
    font-family:"Courier New";
}
.card-container{
    position:relative;
    width:400px; height:300px;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 0 20px rgba(0,0,0,0.5);
}
.card-container img{
    width:100%; height:100%;
}
canvas{
    position:absolute; top:0; left:0;
    cursor:pointer;
}
.hint{
    position:absolute;
    top:5px; left:5px;
    color:#fff;
    font-weight:bold;
    background:rgba(0,0,0,0.3);
    padding:3px 6px;
    border-radius:3px;
}
</style>
</head>
<body>
<div class="card-container">
    <img src="./images/prize2.jpg" alt="奖励图片">
    <canvas id="canvas" width="400" height="300"></canvas>
</div>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// 涂层初始颜色
ctx.fillStyle = "#4682b4";
ctx.fillRect(0, 0, canvas.width, canvas.height);

let isFading = false; // 是否正在渐隐

// 鼠标刮开事件
function scratch(x, y) {
    ctx.globalCompositeOperation = "destination-out";
    ctx.beginPath();
    ctx.arc(x, y, 15, 0, Math.PI * 2);
    ctx.fill();
}

// 计算刮开比例
function getScratchedRatio() {
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    let total = imageData.data.length / 4;
    let cleared = 0;
    for (let i = 3; i < imageData.data.length; i += 4) {
        if (imageData.data[i] === 0) cleared++;
    }
    return cleared / total;
}

// 渐隐动画
function fadeOut() {
    if (!isFading) return;
    const currentAlpha = ctx.globalAlpha;
    if (currentAlpha <= 0) {
        ctx.clearRect(0,0,canvas.width,canvas.height);
        canvas.style.display = "none";
        return;
    }
    ctx.globalAlpha = currentAlpha - 0.05;
    ctx.fillStyle = "#4682b4";
    ctx.fillRect(0,0,canvas.width,canvas.height);
    requestAnimationFrame(fadeOut);
}

// 鼠标事件
canvas.addEventListener("mousemove", e => {
    if (e.buttons === 1 && !isFading) {
        const rect = canvas.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;
        scratch(x, y);
        if (getScratchedRatio() >= 0.2) { // 20% 自动显示
            isFading = true;
            ctx.globalAlpha = 1;
            fadeOut();
        }
    }
});

// 触摸事件
canvas.addEventListener("touchmove", e => {
    e.preventDefault();
    if (isFading) return;
    const rect = canvas.getBoundingClientRect();
    const t = e.touches[0];
    const x = t.clientX - rect.left;
    const y = t.clientY - rect.top;
    scratch(x, y);
    if (getScratchedRatio() >= 0.2) {
        isFading = true;
        ctx.globalAlpha = 1;
        fadeOut();
    }
}, {passive:false});
</script>
</body>
</html>
